<template>
	<view class="vwh root">
		<view style="background-color: rgba(0,0,0,0.7);" class="mask wh100">
			<view v-if="!resulteData.win" class="box-fail bg-cover">
				<view class="inner df-yc">
					<view style="font-size: 38rpx;color: #622129;margin-top: 116rpx;" class="shsc fb"><text
							style="color: #BF2639;" class="mr10">很遗憾</text>未完成每日竞速赛目标</view>
					<view class="fs26"
						style="margin-top: 60rpx;color: #622129;width: 524rpx;text-align: justify;text-align-last: center;">
						由于您的战队未完成{{resulteData.time}}报名参加的{{resulteData.goal}}节点赛段目标，系统将扣留战队的全部质押贡献值，感谢您的支持！今日的每日竞速赛已开启，欢迎您的加入！
					</view>
					<view style="margin-top: 68rpx;color: #FFE2CD;" class="button fs26 df-c">报名今日竞速赛</view>
				</view>
				<view class="award">
					<image style="width: 278rpx" :src="temImgUrl+'/icon-gxb-hover (5).png'" mode="widthFix"></image>
				</view>
				<view class="close">
					<image style="width: 46rpx;" :src="temImgUrl+'/close.png'" mode="widthFix"></image>
				</view>
			</view>
			<view v-if="resulteData.win" class="box-success">
				<view class="inner df-yc">
					<view style="font-size: 38rpx;color: #622129;margin-top: 116rpx;" class="shsc fb">
						完成每日竞速赛<text style="color: #BF2639;" class="ml10">目标奖励</text></view>
					<view class="df-c icon my30">
						<image style="width: 28rpx;" :src="temImgUrl+'/icon-gxb-hover (1).png'" mode="widthFix"></image>
						<text style="color: #BF2639;" class="fs32 ml10">+{{resulteData.devote}}</text>
					</view>
					<view class="fs26"
						style="color: #622129;width: 524rpx;text-align: justify;text-align-last: center;">
						恭喜你，您的战队已完成{{resulteData.time}}报名参加的{{resulteData.goal}}节点赛段目标，系统已自动发放贡献值进入您的账号，感谢您的支持！今日的每日竞速赛已开启，欢迎您的加入！
					</view>
					<view style="margin-top: 68rpx;color: #FFE2CD;" class="button fs26 df-c">报名今日竞速赛</view>
				</view>
				<view class="images">
					<image class="image po1" style="width: 154rpx;" :src="temImgUrl+'/icon-gxb-hover (2).png'"
						mode="widthFix"></image>
					<image class="image po2" style="width: 120rpx;" :src="temImgUrl+'/popup2.png'" mode="widthFix">
					</image>
					<image class="image po3" style="width: 120rpx;" :src="temImgUrl+'/popup2.png'" mode="widthFix">
					</image>

				</view>
				<view class="award">
					<image style="width: 278rpx" :src="temImgUrl+'/icon-gxb-hover (4).png'" mode="widthFix"></image>
				</view>
				<view @tap="close" class="close">
					<image style="width: 46rpx;" :src="temImgUrl+'/close.png'" mode="widthFix"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			resulteData: Object
		},
		data() {
			return {
				temImgUrl: this.$IMG_URL_TEMP,
				imgUrl: this.$IMG_URL,
				fail: false,
				success: true
			}
		},
		methods: {
			close(){
				uni.$emit('closeResultPop')
			}
		},
		created() {
			
		},
		mounted() {}
	}
</script>

<style scoped lang="scss">
	.root {
		position: absolute;
		z-index: 9999;
		left: 0;
		top: 0;

		.mask {
			position: relative;
			left: 0;
			top: 0;

			.box-fail {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				width: 630rpx;
				height: 571rpx;
				background-image:url(#{$IMG_URL}/shmbg.jpg);
				border-radius: 20rpx;
			}

			.box-success {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				width: 630rpx;
				height: 643rpx;
				background-image:url(#{$IMG_URL}/shmbg.jpg);
				border-radius: 20rpx;
			}

			.icon {
				width: 182rpx;
				height: 60rpx;
				background: #FFD5B6;
				border-radius: 30rpx;
			}

			.close,
			.award {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
			}

			.close {
				bottom: -80rpx;
			}

			.award {
				top: -170rpx;
			}

			.button {
				width: 493rpx;
				height: 90rpx;
				background: linear-gradient(270deg, #53181E, #7D333B);
				box-shadow: 0rpx 5rpx 18rpx 0px rgba(83, 24, 30, 0.35);
				border-radius: 45rpx;
			}

			.images {
				.image {
					position: absolute;
				}

				.po1 {
					top: -100rpx;
					left: 480rpx;
				}

				.po2 {
					left: -60rpx;
					top: 150rpx;
				}

				.po3 {
					right: -60rpx;
					top: 280rpx;
				}
			}

		}

	}
</style>
